{% extends "layout.html" %}                #通过这句话，来进行继承挂钩，和主体base.html进行链接
{% block content %}
<style type="text/css">
	.field-item::after{content:'';height: 0;clear: both;visibility: none;display: block;zoom: 1;}
	.field-item{margin: 10px 0;}
	.field-item > div{line-height: 38px;}
	.layui-form{max-width: 900px;margin: 0 auto;}
	.diabled{background-color: #ddd;}
	.highlight{border: 1px solid red !important;}
	.input-group input{display: inline-block;width: 30px;height: 30px;border: 1px solid #ccc;margin-left: 5px;text-align: center;}
	.phone-group input{width: 22px;margin-left: 1px;}
	.disabled{background-color: #ddd;}
	.red-star{font-size: 20px; color: red;line-height: 10px;vertical-align: middle;}
	@media screen and (max-width: 999px) {
		.layui-form{padding: 10px !important;}
		#submit{padding-top: 10px !important;}
		.edit-btn{width: 70% !important;display: block;margin: 0px auto !important;}
		.confirm-btn{width: 70% !important;display: block;margin: 10px auto !important;}
		.wrap{padding: 15px 5px !important;}
		.protocol-wrap{padding: 5px !important;padding-top: 10px !important;}
		.layui-form-label{max-width: 100% !important;overflow: visible !important;white-space: pre-wrap !important;text-align: left !important;}
	}
	body{zoom: 1 !important;}
	@media screen and (max-width: 1440px) and (min-width: 1000px){
		.wrap{width: 1000px !important;}
		.layui-nav .layui-nav-item a{padding: 0 5px;}
		.top-contact{padding-left: 10px;}
	}
</style>
<link rel="stylesheet" type="text/css" href="https://d3s6yopk5rlhed.cloudfront.net/static/css/jquery-ui.min.css">
<div class="wrap" style="margin-top: 20px;padding: 25px 30px;background-color: #fff;box-sizing: border-box;">
	<div>
		<a style="color: #2D2D2D;opacity: .5;" href="/">Home</a>
		<i style="color: #2D2D2D;opacity: .5;">></i>
		<a href=/Summary">Loan application</a>
	</div>
	<div class="tc" style="padding: 30px 0 10px;font-size: 18px;">
		Information validation
	</div>
	<form class="layui-form" id="customer-form" action="" style="padding: 25px 50px;background-color: #fff;">
		<!-- <label class="step-des">Step 1,Personal information</label> -->
		<div class="field-item">
			<div class="layui-col-md4"><span class="red-star">*</span>First Name</div>
			<div class="layui-col-md8">
				<input type="text" name="first_name" placeholder="Susan" autocomplete="off" class="validate[required] layui-input" data-prompt-position="topLeft">
			</div>
		</div>
		<div class="field-item">
			<div class="layui-col-md4"><span class="red-star">*</span>Last Name</div>
			<div class="layui-col-md8">
				<input type="text" name="last_name" placeholder="Williams" autocomplete="off" class="validate[required] layui-input" data-prompt-position="topLeft">
			</div>
		</div>
		<div class="field-item">
			<div class="layui-col-md4">
				<span class="red-star">*</span>Your Birthdate
			</div>
			<div class="layui-col-md8">
				<input type="text" name="your_birthdate" placeholder="YYYY-MM-DD" autocomplete="off" class="validate[required] layui-input" id="your-birthdate">
			</div>
		</div>
		<div class="field-item">
			<div class="layui-col-md4"><span class="red-star">*</span>Phone number</div>
			<div class="layui-col-md8">
				<div class="input-group phone-group">
					(
					<input type="number" name="">
					<input type="number" name="">
					<input type="number" name=""> )
					
					<input type="number" name="">
					<input type="number" name="">
					<input type="number" name="">
					—
					<input type="number" name="">
					<input type="number" name="">
					<input type="number" name="">
					<input type="number" name="">
				</div>
				<input style="display: none;" type="text" name="phone_number" placeholder="" autocomplete="off" class="validate[required] layui-input" data-prompt-position="topLeft">
				<!-- <input type="text" name="phone_number" placeholder="(212)3233-3234" autocomplete="off" class="validate[required] layui-input" data-prompt-position="topLeft"> -->
			</div>
		</div>
		<div class="field-item">
			<div class="layui-col-md4"><span class="red-star">*</span>Email Address</div>
			<div class="layui-col-md8">
				<input type="text" name="email_address" placeholder="example@.company.cn" autocomplete="off" class="layui-input" data-prompt-position="topLeft">
			</div>
		</div>
		<div class="field-item">
			<div class="layui-col-md4"><span class="red-star">*</span>Property address</div>
			<div class="layui-col-md8">
				<input type="text" name="property_address" placeholder="" autocomplete="off" class="validate[required] layui-input" data-prompt-position="topLeft">
			</div>
		</div>
		<div class="field-item">
			<div class="layui-col-md4"><span class="red-star">*</span>Property Postal Code</div>
			<div class="layui-col-md8">
				<div class="input-group post-code">
					<input type="" name="">
					<input type="" name="">
					<input type="" name="">
					&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="" name="">
					<input type="" name="">
					<input type="" name="">
				</div>
				<input style="display: none;" type="text" name="property_post_code" placeholder="M4J0A4" autocomplete="off" class="validate[required] layui-input" data-prompt-position="topLeft">
				<!-- <input type="text" name="property_post_code" placeholder="M4J0A4" autocomplete="off" class="validate[required] layui-input" data-prompt-position="topLeft"> -->
			</div>
		</div>
		<div class="field-item">
			<div class="layui-col-md4"><span class="red-star">*</span>Do you own your property?</div>
			<div class="layui-col-md8">
				<input type="radio" name="is_own_this_property" value="1" title="Yes">
			    <input type="radio" name="is_own_this_property" value="0" title="No" checked>
			</div>
		</div>
		<div id="optips-wrap" style="color:red;"></div>
		<div class="field-item">
			<div class="layui-col-md4"><span class="red-star">*</span>Is this your Primary Residence?</div>
			<div class="layui-col-md8">
				<input type="radio" name="is_primary_residence" value="1" title="Yes">
			    <input type="radio" name="is_primary_residence" value="0" title="No" checked>
			</div>
		</div>
		<div class="field-item">
			<div class="layui-col-md4"><span class="red-star">*</span>How Many Years Have You Lived Here?</div>
			<div class="layui-col-md8">
				<input type="text" name="years_lived_here" placeholder="" autocomplete="off" class="layui-input" onkeyup="this.value=this.value.replace(/\D/g,'');" onafterpaste="this.value=this.value.replace(/\D/g,'')">
			</div>
		</div>
		<div class="field-item">
			<div class="layui-col-md4"><span class="red-star">*</span>Property Estimated Value</div>
			<div class="layui-col-md8">
				<input type="text" name="property_estimated_value" placeholder="" autocomplete="off" class="validate[required] layui-input">
			</div>
		</div>
		<!-- <label class="step-des">Step 2,Property information</label> -->
		<div class="field-item">
			<div class="layui-col-md4">
		  		<span class="red-star">*</span>Is there a rental component?
		  	</div>
		  	<div class="layui-col-md8">
			    <input type="radio" name="is_have_rental_component" value="1" title="Yes">
			    <input type="radio" name="is_have_rental_component" value="0" title="No" checked>
			</div>
		</div>
		<div class="field-item">
			<div class="layui-col-md4">
				<span class="red-star">*</span> Mortgage Balance (put 0 if none)
			</div>
			<div class="layui-col-md8">
				<input type="text" name="first_mortgage_balance" placeholder="" autocomplete="off" class="validate[required] layui-input" onkeyup="this.value=this.value.replace(/\D/g,'');" onafterpaste="this.value=this.value.replace(/\D/g,'')">		
			</div>
		</div>
		<div class="field-item">
			<div class="layui-col-md4">
		  		<span class="red-star">*</span>Do you have a second Mortgage on this property?
			</div>
			<div class="layui-col-md8">
				<input type="radio" name="is_have_second_mortgage" value="1" title="Yes">
				<input type="radio" name="is_have_second_mortgage" value="0" title="No">	
			</div>
		    <div id="smtips-wrap"></div>
		</div>
		<!-- <div class="layui-form-item">
		  <input type="text" name="how_much_like_borrow" placeholder="How much would you like to borrow?" autocomplete="off" class="layui-input">
		</div> -->
		<div class="field-item">
			<div class="layui-col-md4">
		  		<span class="red-star">*</span>How much would you like to borrow?
			</div>
			<div class="layui-col-md8">
		  		<input type="text" name="how_much_like_borrow" placeholder="How much would you like to borrow?" autocomplete="off" class="validate[required] layui-input" onkeyup="this.value=this.value.replace(/\D/g,'');" onafterpaste="this.value=this.value.replace(/\D/g,'')">
			</div>
		</div>
		<div id="hmtips-wrap" style="width: 90%;padding-top: 3px;"></div>

		<div class="field-item">
			<div class="layui-col-md4">
				<span class="red-star">*</span>When do you need the money?
			</div>
		  	<div class="layui-col-md8">
		  		<input type="text" name="when_needed" placeholder="YYYY-MM-DD" autocomplete="off" class="validate[required] layui-input" id="datepicker">
		  	</div>
		</div>
		<div id="wntips-wrap" style="width: 90%;padding-top: 3px;"></div>
		<!-- <label class="step-des">Step 3a,Property information</label> -->

		<!-- <div class="field-item">
			<div class="layui-col-md4">
				Co-applicant’s Birthdate
			</div>
			<div class="layui-col-md8">
				<input type="text" name="co_applicants_birthdate" placeholder="" autocomplete="off" class="validate[required] layui-input" id="co-applicants-birthdate">
			</div>
		</div> -->
		<div class="field-item">
			<div class="layui-col-md4">
				<span class="red-star">*</span>Name of Your Employer
			</div>
			<div class="layui-col-md8">
				<input type="text" name="name_of_employer" placeholder="" autocomplete="off" class="validate[required] layui-input" id="co-applicants-birthdate">
			</div>
		</div>
		<div class="field-item">
			<div class="layui-col-md4">
				<span class="red-star">*</span>Years Worked Here
			</div>
			<div class="layui-col-md8">
				<input type="text" name="years_of_work" placeholder="" autocomplete="off" class="validate[required] layui-input" onkeyup="this.value=this.value.replace(/\D/g,'');this.value= (this.value > 99?99:this.value);" onafterpaste="this.value=this.value.replace(/\D/g,'')">
			</div>
		</div>
		<div class="field-item">
			<div class="layui-col-md4">
				Job Title
			</div>
			<div class="layui-col-md8">
				<input type="text" name="job_title" placeholder="" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="field-item">
			<div class="layui-col-md4">
				<span class="red-star">*</span>Gross Annual Income
			</div>
			<div class="layui-col-md8">
				<input type="text" name="gross_annual_income" placeholder="" autocomplete="off" class="validate[required] layui-input number-format" onkeyup="this.value=this.value.replace(/\D/g,'');" onafterpaste="this.value=this.value.replace(/\D/g,'')">
			</div>
		</div>
		<div class="field-item">
			<div class="layui-col-md4">
				<span class="red-star">*</span>Other Annual Income
			</div>
			<div class="layui-col-md8">
				<input type="text" name="other_annual_income" placeholder="" autocomplete="off" class="validate[required] layui-input number-format" onkeyup="this.value=this.value.replace(/\D/g,'');" onafterpaste="this.value=this.value.replace(/\D/g,'')">
			</div>
		</div>
		<div class="field-item">
			<div class="layui-col-md4">
				<span class="red-star">*</span>Is there a co-applicant, or anyone else on title?
			</div>
			<div class="layui-col-md8">
				<input type="radio" name="is_have_co_applicant" value="1" title="Yes">
		    	<input type="radio" name="is_have_co_applicant" value="0" title="No" checked>
			</div>
		</div>
		<div id="co-applicant">
			<div class="field-item">
				<div class="layui-col-md4">
					<span class="red-star">*</span>First Name of co-applicant
				</div>
				<div class="layui-col-md8">
					<input type="text" name="first_name_c" placeholder="" autocomplete="off" class="validate[required] layui-input required">
				</div>
			</div>
			<div class="field-item">
				<div class="layui-col-md4">
					<span class="red-star">*</span>Last Name of co-applicant
				</div>
				<div class="layui-col-md8">
					<input type="text" name="last_name_c" placeholder="" autocomplete="off" class="validate[required] layui-input required">
				</div>
			</div>
			<div class="field-item">
				<div class="layui-col-md4">
					<span class="red-star">*</span>Co-applicant's Birthdate
				</div>
				<div class="layui-col-md8">
					<input type="text" name="co_application_birthdate" placeholder="YYYY-MM-DD" autocomplete="off" class="validate[required] layui-input required" id="co-application-birthdate">
				</div>
			</div>
			<div class="field-item">
				<div class="layui-col-md4">
					<span class="red-star">*</span>Name of co-applicant Employer
				</div>
				<div class="layui-col-md8">
					<input type="text" name="name_of_employer_c" placeholder="" autocomplete="off" class="validate[required] layui-input required">		
				</div>
			</div>
			<div class="field-item">
				<div class="layui-col-md4">
					<span class="red-star">*</span>Years Worked Here
				</div>
				<div class="layui-col-md8">
					<input type="text" name="years_of_work_c" placeholder="" autocomplete="off" class="layui-input" onkeyup="this.value=this.value.replace(/\D/g,'');this.value= (this.value > 99?99:this.value);" onafterpaste="this.value=this.value.replace(/\D/g,'')">
				</div>
			</div>
			<div class="field-item">
				<div class="layui-col-md4">
					<span class="red-star">*</span>Job Title
				</div>
				<div class="layui-col-md8">
					<input type="text" name="job_title_c" placeholder="" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="field-item">
				<div class="layui-col-md4">
					<span class="red-star">*</span>Gross Annual Income
				</div>
				<div class="layui-col-md8">
					<input type="text" name="gross_annual_income_c" placeholder="" autocomplete="off" class="validate[required] layui-input number-format required" onkeyup="this.value=this.value.replace(/\D/g,'');" onafterpaste="this.value=this.value.replace(/\D/g,'')">
				</div>
			</div>
			<div class="field-item">
				<div class="layui-col-md4">
					<span class="red-star">*</span>Other Annual Income
				</div>
				<div class="layui-col-md8">
					<input type="text" name="other_annual_income_c" placeholder="" autocomplete="off" class="validate[required] layui-input number-format required" onkeyup="this.value=this.value.replace(/\D/g,'');" onafterpaste="this.value=this.value.replace(/\D/g,'')">
				</div>
			</div>
		</div>
		<!-- <label class="step-des">Step 3b,Property information</label> -->
		
		<!-- <label class="step-des">Step 4,Property information</label> -->
		<textarea name="how_payback_principal" placeholder="How will you pay back the principal? (Maximum 1000 characters)" class="validate[required] layui-textarea"></textarea>
		<textarea style="margin-top: 10px;" name="how_pay_interest" placeholder="How will you pay the interest? (Maximum 1000 characters)" class="validate[required] layui-textarea"></textarea>
		<div class="error-tips hide" style="padding: 20px 0;color: red;">
			<p>We are sorry but you are declined because:</p>
			<p style="padding-left: 10px;">
				Sorry, we do not lend a third Mortgage.<br>
				The total loan-to-value cannot exceed 80%.<br>
				We need at least two weeks to proceed your case. At certain season, this time will be longer.
			</p>
			<p>We really want to help. You are always welcomed if you change your request criteria.</p>
		</div>
		<div class="layui-form-item tc button-wrap" style="margin-top: 50px;">
			<span style=" width: 30%;" id="edit-btn" type="button" class="layui-btn layui-btn-primary edit-btn" onclick="edit()">I want to modify..</span>
		  	<span style=" width: 30%;" type="button" class="layui-btn layui-btn-primary confirm-btn" onclick="ensure()">CONFIRM</span>

		    <!-- <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
		    <button type="reset" class="layui-btn layui-btn-primary">重置</button> -->
		</div>
	</form>
	<div class="hide" id="submit" style="padding: 50px 10px;">
		<form class="layui-form" style="padding: 0;max-width: 1000px;">
			<div class="protocol-wrap" style="padding: 32px 40px;border: 1px solid #F0F0F0;">
			<p class="tc" style="font-size: 18px;font-weight: 700;">Terms and conditions sheet for credit checking</p>
			<div style="margin: 0px 0;padding: 5px;overflow: auto;">
<p style="white-space: pre-wrap;">
Radiance Mortgage Inc. ("Radiance", "we", "us" and "our"), in accordance with our privacy policy and our obligations at law, may collect, receive, retain, use and disclose personal information about you, our client, for the purpose of: verification assessing credit-worthiness; establishing credit limits; maintaining client relationships; presenting your mortgage application to various lenders and insurers and providing information to you about other products and services that may be of interest to you. We may also disclose your personal information to (i) any potential purchaser of our business and their advisors. (ii) Any third party service providers to whom we may outsource our business functions and (iii) any parties involved in the securitization, assignment or pledge of a loan or mortgage that are obtained through us.

By signing this form, you are providing your acknowledgement and express consent to Radiance and our agent:
</p>
<p style="white-space: pre-wrap;padding-left: 0px;">
1.to collect, use, retain and disclose your personal information for seven (7) years following the later of a) the date of your latest application with us, or b) the date on which your loans or mortgages we have arranged for you have expired or been terminated;

2.to inquire about and receive your personal information from: consumer reporting agencies, credit bureaus, real estate appraisers, your bank(s) or other financial institutions with whom you deal, your past mortgage brokers, your present and past employers and other third parties who may have information about your financial status;

3.that the approval or granting of any mortgage by a lender to you, as arranged by Radiance, is not to be construed or relied on by you as representing the value or condition of any underlying security or representing that you have the ability to repay the arranged mortgage debt;
4.to receive commercial electronic messages and other forms of business information, communications and marketing regarding products and services that may be of interest to you;

5.That Radiance and our agent may receive fees or incentives from a lender for arranging a mortgage or loan for you. Fees and incentives include but are not limited to money, points or goods and services. Fees and incentives may vary between lenders for similar products and may also be dependent on the amounts and types of mortgage products originated.

6.That Radiance and our agent have not provided you with any investment advice or services and have advised you of the need for independent financial and tax planning advice from a qualified professional.
				</p>
				</div>
			</div>
			<div class="layui-form-item tc" style="padding: 10px 0;">
			  <label class="layui-form-label" style="width: auto;">Do you accept the terms and conditions stated above?</label>
			    <input type="radio" name="is_accept" value="1" title="Yes">
			    <input type="radio" name="is_accept" value="0" title="No" checked>
			</div>
			<div id="isAccept-wrap" style="width: 90%;height: 30px;padding-top: 0px;padding-left: 12px;color: red;"></div>
			<div style="text-align: center;">
				<div style="display: inline-block;" class="g-recaptcha" data-callback="robotVerified" data-sitekey="6LdpensUAAAAABFHixp7wpAOm45w6FkYFuPVRmj2"></div>
			</div>
			<div class="layui-form-item tc button-wrap" style="margin-top: 10px;">
			  	<span style=" width: 40%;" id="submit-btn" class="disabled layui-btn layui-btn-primary" onclick="doSubmit()">SUBMIT</span>
			    <!-- <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
			    <button type="reset" class="layui-btn layui-btn-primary">重置</button> -->
			</div>
		</form>
	</div>
</div>
<!-- <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>	 -->
<!-- script type="text/javascript" src=" http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> -->
<script type="text/javascript" src="https://d3s6yopk5rlhed.cloudfront.net/static/js/jquery.min.js"></script>
<script type="text/javascript" src="https://d3s6yopk5rlhed.cloudfront.net/static/js/jquery-ui.min.js"></script>
<script src='https://www.google.com/recaptcha/api.js' async></script>
<script type="text/javascript"> 
	var isRobotVerified = false;
	var g_recaptcha_response = 'test';
	function robotVerified(data){
      console.log('Verified: not robot');
      //isRobotVerified = true;
	  g_recaptcha_response = data;
	  console.log(g_recaptcha_response,'g_recaptcha_response');
	  verifyCapcha(function(result){
	  	isRobotVerified = result;
	  	var is_accept = $('.layui-form-radioed').prev('input').val();
	  	if(isRobotVerified && is_accept == 1) {
	  		$('#submit-btn').removeClass('disabled');
	  	}else{
	  		$('#submit-btn').addClass('disabled');
	  	}
	  });
    }
    //robotVerified('dd');
    // verifyCapcha();
    console.log('hello');
	$(function() {
		$('.field-item').on('click', '.highlight', function() {
			console.log('hight');
			edit();
		});

		$('.layui-form-item').on('click', '.layui-form-radio', function(){
			console.log('radio clicked');
			var is_accept = $('.layui-form-radioed').prev('input').val();
			console.log(is_accept);
			if(is_accept == 1 && isRobotVerified){
				$('#submit-btn').removeClass('disabled');
			}else{
				$('#submit-btn').addClass('disabled');
			}
			// if(is_accept == 1){
			// 	$('#submit-btn').removeClass('disabled');
			// }else{
			// 	$('#submit-btn').addClass('disabled');
			// }
		})
		// Initial page to disabled edit
		$('input, textarea').each(function() {
			$(this).addClass('diabled').attr('disabled', 'disabled');
		});
		var postData = JSON.parse(localStorage.getItem('postData')) || {};
		// for(var item in postData) {
		// 	console.log(item);
		// }
		if(postData['is_have_co_applicant'] == 0) {
			$('#co-applicant input').removeClass('validate[required]');
		}

		$('form input, form textarea').each(function(){
			if($(this).attr('type') == 'radio') {
				if($(this).val() == postData[$(this).attr('name')]) {
					$(this).attr('checked', 'checked')
				}else{
					console.log($(this).attr('name'),'>>>>>>');
					$(this).removeAttr('checked');
				}
			}else{
				$(this).val(postData[$(this).attr('name')]);
			}
		});
		var is_have_co_applicant = document.querySelector('input[name=is_have_co_applicant]:checked').value;
		if(is_have_co_applicant == 0) {
			$('#co-applicant').hide();
		}
		var mobile = postData['phone_number'] + '';
		mobile = mobile.replace(/\(|\)|\-/g,'')
		console.log(mobile, 'mobile');
		if(mobile) {
			$('.phone-group input').each(function(index){
				$(this).val(mobile.substring(index,index + 1));
			});
		}
		var postCode = postData['property_post_code'];
		if(postCode){
			$('.post-code input').each(function(index){
				$(this).val(postCode.substring(index, index + 1));
			});
		}

		$( "#_datepicker" ).datepicker({
			dateFormat: "yy-mm-dd",
			changeMonth: true,
			changeYear: true,
			minDate: new Date()
		});
		$('#_your-birthdate').datepicker({
			dateFormat: 'yy-mm-dd',
			changeMonth: true,
			changeYear: true,
			maxDate: '2018-01-01'
		});
		$('#_co-application-birthdate').datepicker({
			dateFormat: 'yy-mm-dd',
			changeMonth: true,
			changeYear: true,
			maxDate: new Date()
		});
		//$('.post-code input').on('keypress',function(evt){
		//	if(evt.keyCode == 8){
		//		if($(this).val() == ''){
		//			$(this).prev().focus();
		//		}
		//	}else{
		//		//$(this).next().focus();				
		//	}
			//$(this).val($(this).val().substring(0,1));
		//});
		//$('.post-code input').on('keyup',function(evt){
		//	if(evt.keyCode == 8){
		//		if($(this).val() == ''){
		//			$(this).prev().focus();
		//		}
		//	}else{
		//		$(this).next().focus();
		//	}
			//$(this).val($(this).val().substring(0,1));
		//});

		//$('.phone-group input').on('keypress',function(evt){
		//	if(evt.keyCode == 8){
		//		if($(this).val() == ''){
		//			$(this).prev().focus();
		//		}
		//	}else{
				
				
		//	}
			// $(this).val($(this).val().substring(0,1));
		//});
		$('.phone-group input').on('keyup',function(evt){
		//	if(evt.keyCode == 8){
		//		if($(this).val() == ''){
		//			$(this).prev().focus();
		//		}
		//	}else{
				$(this).val($(this).val().replace(/^\D$/g,''));
		//		if($.trim($(this).val()) != ''){
		//			$(this).next().focus();				
		//		}
				//$(this).next().focus();
		//	}
			// $(this).val($(this).val().substring(0,1));
		});
		setInterval(function(){
			var value = '';
			$('.post-code input').each(function(){
				$(this).val($(this).val().substring(0,1).toUpperCase());
				value += $(this).val();
				$(this).parent().next().val(value);
			});
			var _phone = '';
			$('.phone-group input').each(function(){
				$(this).val($(this).val().substring(0,1));
				_phone += $(this).val();
				if( _phone.length >= 10 ) {
					var phone = _phone;
					_phone = '(' + phone.substring(0,3) + ')' + phone.substring(3,6) + '-' + phone.substring(6);	
				}
				$(this).parent().next().val(_phone);

			});
		},50);
		$('.number-format,input[name=property_estimated_value],input[name=how_much_like_borrow]').on('keyup',function(evt){
			if($.trim($(this).val()) !=''){
				$(this).val($(this).val().replace(/\D/ig,''));
				if($(this).val() != '') {
					$(this).val(parseInt($(this).val()));
					$(this).val(formatMoney($(this).val(),false));
				}

			}
			console.log($(this).val());
		});

		$('.footer').css({'position':'relative'})
	});

	function edit() {
		$('input, textarea').each(function() {
			$(this).removeClass('diabled').attr('disabled', false);
		});
		$('#edit-btn').remove();
		form.render();
		setTimeout(function(){
			$('.number-format,input[name=property_estimated_value],input[name=how_much_like_borrow]').on('keyup',function(evt){
				if($.trim($(this).val()) !=''){
					$(this).val($(this).val().replace(/\D/ig,''));
					if($(this).val() != '') {
						$(this).val(parseInt($(this).val()));
						$(this).val(formatMoney($(this).val(),false));
					}

				}
				console.log($(this).val());
			});
		},2000);

		//window.location.href = '/edit';
	}
	function formatMoney(s, type) {
	     if (/[^0-9\.]/.test(s))
	         return "0.00";
	     if (s == null || s == "null" || s == "")
	         return "0.00";
	     s = s.toString().replace(/^(\d*)$/, "$1.");
	     s = (s + "00").replace(/(\d*\.\d\d)\d*/, "$1");
	     s = s.replace(".", ",");
	     var re = /(\d)(\d{3},)/;
	     while (re.test(s))
	         s = s.replace(re, "$1,$2");
	     s = s.replace(/,(\d\d)$/, ".$1");
	     if (type == 0) {
	         var a = s.split(".");
	         if (a[1] == "00") {
	             s = a[0];
	         }
	     }
	     return s;
	 }
	 function doSubmit() {
	 	if($('#submit-btn').hasClass('disabled')) return false;


	 	$('#isAccept-wrap').text('');
	 	var is_accept = $('input[name=is_accept]:checked').val();
	 	console.log(is_accept);
	 	if(!is_accept || is_accept == 0){
	 		$('#isAccept-wrap').text('Please accept the terms and conditions');
	 		return false;
	 	}

	 	// if(!isRobotVerified) {
	 	// 	$('#isAccept-wrap').text('Robot verify failed!');
	 	// 	return false;
	 	// }

	 	$.ajax({
	 		url: '/save',
	 		data: postData,
	 		dataType: 'json',
	 		type: 'post',
	 		success: function(ret) {
	 			console.log(ret);
	 			if(ret.status == 1){
	 				if(!result) {
	 					location.href = '/fail';
	 				}else{
	 					location.href = '/success';
	 				}
	 			}else{
	 				//window.location.href = '/fail';
	 			}
	 			//alert('提交成功！');
	 		}
	 	});
	 }
	 function verifyCapcha(cb) {
	 	if(!g_recaptcha_response){
	 		console.log('g_recaptcha_response is empty!');
	 		cb && cb(false);
	 		return false;
	 	}
	 	$.ajax({
	 		url: '/captchaVerify',
	 		data: {code: g_recaptcha_response},
	 		dataType: 'json',
	 		type: 'post',
	 		success: function(ret) {
	 			console.log(ret);
	 			if(ret.status == 1){
	 				cb && cb(true);
	 			}else{
	 				cb && cb(false);
	 			}
	 			//alert('提交成功！');
	 		}
	 	});
	 }
	function ensure() {
		window.result = true;
		var errs = {
			third: 0,
			exceed: 0,
			long: 0
		}
		var err_msg = '';

		var is_have_co_applicant = document.querySelector('input[name=is_have_co_applicant]:checked').value;
		if(is_have_co_applicant == 1) {
			$('#co-applicant input.required').addClass('validate[required]');
		}else{
			$('#co-applicant input.required').removeClass('validate[required]');
		}


		var $post_code = $('input[name=property_post_code]');
		// console.log('post code format error'+ $post_code.val());
		if(!/^([A-Z]|\d){6}$/g.test($post_code.val())){
			console.log('post code format error');
			// $post_code.addClass('highlight').after('<span class="tips" style="float:right;margin-right: 5px; margin-top: -16px;color: red;">Format error!</span>');
			$('.post-code input').each(function(){
				$(this).addClass('highlight').attr('disabled',false);
			});
			result = false;
		}

		var email = $('input[name=email_address]').val();
		console.log(email,'email');
		if($.trim(email) != ''){
			if(!/.*@.*/.test(email)){
				$('input[name=email_address]').addClass('highlight').attr('disabled',false);
				result = false;
			}
		}

		var phone =  $('input[name=phone_number]').val();
		console.log(phone);
		if(!/\(\d\d\d\)\d\d\d-\d\d\d/.test(phone)){
			$('.phone-group input').each(function(){
				$(this).addClass('highlight').attr('disabled', false);
			});
			result = false;
		}

		var is_own_this_property = $('input[name=is_own_this_property]:checked').val();
		$('#optips-wrap').html('');
		if(is_own_this_property == 0){
			$('#optips-wrap').html('To get approved, you must own your home!');
			result = false;
		}

		$('input,textarea').each(function() {
			if($(this).hasClass('validate[required]') && $.trim($(this).val()) == ''){
				$(this).addClass('highlight').attr('disabled', false);//.after('<span class="tips" style="float:right;margin-right: 5px; margin-top: -16px;color: red;">Required</span>');
				result = false;
			}
		});
		form.render();

		if(!result) return;

		var is_have_second_mortage = $('input[name=is_have_second_mortgage]:checked').val();
		if(is_have_second_mortage == 1) {
			result = false;
			//update err_msg to contain all decline infomation.
			err_msg = err_msg + 'a third Mortgage;';
			errs.third = 1;
		}

		var property_pstimated_value = parseFloat($('input[name=property_estimated_value]').val().replace(/,/g,''));
		var first_mortgage = parseFloat($('input[name=first_mortgage_balance]').val().replace(/,/g,'')) || 0;
		var amount_want_borrow = parseFloat($('input[name=how_much_like_borrow]').val().replace(/,/g,''));
		var _result = (amount_want_borrow + first_mortgage)/property_pstimated_value;
		console.log(property_pstimated_value, 'property_pstimated_value');
		console.log(amount_want_borrow, 'amount_want_borrow');
		console.log(_result, 'result');
		if(_result > .75){
			//update err_msg to contain all decline infomation.
			err_msg = err_msg + 'exceed;';
            result = false;
            errs.exceed = 1;
		}

		var current_time = new Date().getTime();
		var when_needed = $('input[name=when_needed]').val();
		

		var when_needed_timestamp = new Date(when_needed + '').getTime();
		console.log(current_time,'current_time');
		console.log(when_needed_timestamp,'when_needed_timestamp');
		console.log(when_needed,'when_needed');
		console.log(when_needed_timestamp - current_time,'period_time');
		console.log(1000*60*60*24*14, '1000*60*60*24*14');
		$('#wntips-wrap').html('');
		if((when_needed_timestamp - current_time) < 1000*60*60*24*14){
			//小于14天
			$('#wntips-wrap').html('<span class="tips" style="color:red;">We need at least two weeks to proceed your case. At certain season, this time will be longer.</span>');

			result = false;
			//update err_msg to contain all decline infomation.
			err_msg = err_msg + 'too long;';
			errs.long = 1;

		}
		window.postData = {};
		$('form input, form textarea').each(function(){
			//if($(this).attr('name') != '') {
				if($(this).attr('type') == 'radio'){
					if($(this).is(':checked')){
						postData[$(this).attr('name')] = $(this).val(); 
						console.log($(this).attr('name'));
					}
				}else{
					if($(this).attr('name') != '' && $(this).val().replace(/,/ig,'') != '') {
						postData[$(this).attr('name')] = $(this).val().replace(/,/ig,'');
					}
				}
			//}
		});
		console.log(postData);
		if(result){
			postData['apply_status'] = 1;
			postData['apply_decline_info'] = '';
		}else{
			postData['apply_status'] = 0;
			postData['apply_decline_info'] = err_msg;
		}
		localStorage.setItem('postData', JSON.stringify(postData));
		localStorage.setItem('errs', JSON.stringify(errs));
		$('#customer-form').addClass('hide');
		$('#submit').removeClass('hide');
		$('#submit input').attr('disabled',false);
		form.render();
	}
	layui.use('laydate',function(){
                        var laydate = layui.laydate;
                        laydate.render({
                                elem: '#your-birthdate',
                                lang:'en',
                                value: '2007-12-30',
                                isInitValue: false,
                                max:'2007-12-30'
                        }); 
                        laydate.render({
                                elem: '#co-application-birthdatee',
                                lang:'en',
                                value: '2007-12-30',
                                isInitValue: false,
                                max:'2007-12-30'
                        }); 
                        laydate.render({
                                elem: '#datepicker',
                                lang:'en',
                                min:new Date().Format("yyyy-MM-dd")
                        }); 
                }); 
	layui.use('form', function(){
	  window.form = layui.form;
	});	
</script>
{% endblock %}
